<template>
  <section class="task">
    <el-col :span="24" class="action-bar">
			<span class="task-form-text">状态：</span>
      <el-select v-model="taskState" clearable placeholder="请选择" style="margin:0 20px;">
        <el-option
          v-for="item in taskStatusSearch"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-autocomplete
			style="margin:0 20px;width:300px"
            v-model="searchCompanyName"
			:fetch-suggestions="companyInfoSearch"
			value-key="value"
			popper-class="autocomplete"
			:trigger-on-focus="true"
			@select="handleSelect"
			placeholder="输入企业名称"
            >
			<template slot-scope="scope">
				<div>
					{{scope.item}} 
				</div>
			</template>
        </el-autocomplete>
		<el-button type="primary" size="medium" @click="search">筛选</el-button>
    </el-col>

    <!--列表-->
		<el-table :data="tasks" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60" sortable>
			</el-table-column>
			<el-table-column prop="apply_num" label="申请编号" width="150" sortable>
			</el-table-column>
			<el-table-column prop="realname" label="姓名" width="150" sortable>
			</el-table-column>
			<el-table-column prop="vip_name" label="会员等级" width="150" sortable>
			</el-table-column>
			<el-table-column prop="company_name" label="企业名称" width="150" sortable>
			</el-table-column>
			
			<el-table-column prop="created_at" label="提交时间" width="180" sortable>
			</el-table-column>
			<el-table-column prop="end_time" label="宣传内容" width="100" sortable>
                <template slot-scope="scope">
                    <div>
                        <el-button type="primary" size="mini" @click="showPublicity(scope.row.id)">查看</el-button>
                    </div>
                </template>
			</el-table-column>
			<el-table-column prop="status_name" label="审核状态" width="100" sortable>
				<template slot-scope="scope">
					<!-- <el-tag type="info">未激活</el-tag> -->
					<el-tag v-if="scope.row.status=='0'" type="info">{{scope.row.status_name}}</el-tag>
					<el-tag v-if="scope.row.status=='1'" type="success">{{scope.row.status_name}}</el-tag>
					<el-tag v-if="scope.row.status=='2'" type="danger">{{scope.row.status_name}}</el-tag>
				</template>
			</el-table-column>
            <el-table-column prop="review_time" label="审核时间" width="180" sortable>
			</el-table-column>
            <el-table-column prop="link_url" label="链接" width="100" sortable>
				<template slot-scope="scope">
					<div v-show="scope.row.link_url">
						<el-button type="primary"
						v-clipboard:copy="scope.row.link_url"
						v-clipboard:success="onCopy"
						size="mini"
						v-clipboard:error="onError">复制</el-button>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="380">
				<template slot-scope="scope">
					<div>
						
						<div v-show="scope.row.status!=0">
							<el-button type="primary" size="mini" disabled>通过</el-button>
							<el-button type="danger" class="danger-btn" size="mini" disabled>拒绝</el-button>
							<el-button type="primary" size="mini" @click="del(scope.row.id)">删除</el-button>
							<el-button type="Success" v-if="scope.row.status=='2'" size="mini" @click="getDetail(scope.row.refuse_reason)">查看拒绝原因</el-button>
						</div>
						<div v-show="scope.row.status==0">
							<el-button type="primary" size="mini" @click="pass(scope.row.id)">通过</el-button>
							<el-button type="danger" class="danger-btn" size="mini" @click="reject(scope.row.id)">拒绝</el-button>
							<el-button type="primary" size="mini" @click="del(scope.row.id)">删除</el-button>
							<el-button type="Success" v-if="scope.row.status=='2'" size="mini" @click="getDetail(scope.row.refuse_reason)">查看拒绝原因</el-button>
						</div>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code">
				<el-pagination
					background
					:page-size="16"
					layout="prev, pager, next"
					:total="totalPage"
					@current-change="pageChange"
						>
				</el-pagination>
			</div>
    </el-col>

		<!--拒绝弹窗-->
		<el-dialog title="填写拒绝理由" :visible.sync="addFormVisible" @close="initData">
			<el-form :model="addForm" label-width="80px" ref="addForm">
				<el-form-item label="拒绝理由">
					<el-input type="textarea" v-model="addForm.rejectReason"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click="rejectHandle">提交</el-button>
			</div>
		</el-dialog>
        
        <!-- 拒绝详情弹窗 -->
        <el-dialog title="拒绝理由" :visible.sync="detailVisible" @close="initData">
			<el-form :model="addForm" label-width="80px" ref="addForm">
				<el-form-item label="拒绝理由">
					<div>{{rejectReason}}</div>
				</el-form-item>
			</el-form>
		</el-dialog>
        
        <!-- 宣传内容弹窗 -->
        <el-dialog title="宣传内容" :visible.sync="publicityVisible" @close="initData">
			<el-form :model="addForm" label-width="80px" ref="addForm">
				<el-form-item label="宣传内容">
					<div v-html="propagandaContent"></div>
				</el-form-item>
			</el-form>
		</el-dialog>
  </section>
</template>

<script>
import { setTimeout } from 'timers';
export default {
	data(){
		return {
		//新增界面数据
		addForm: {
			rejectReason:''
        },
        dialogTit:'',
        addFormVisible:false,//拒绝弹窗
        detailVisible:false,//查看详情弹窗
        publicityVisible:false,//宣传内容弹窗
		//搜索状态
		taskStatusSearch:[{label: '全部',value: ''},{label: '待审核',value: '0'},{label: '通过',value: '1'},{label: '拒绝',value: '2'}],
		//更改状态
		taskStatusSubmit:[{value: '已完成',label: '已完成'},{value: '未完成',label: '未完成'}],
		taskState: '',
				//类型
		tasks:[],
		users:'',
		page:1,
		totalPage:0,
        id:'',//编辑当条任务id
        
        searchCompanyName:'',//搜索的公司名
		propagandaContent:'',//宣传内容
		rejectReason:''//查看拒绝的理由
		}
	},

	methods:{
		onCopy(e){
			this.$message({
				type:'success',
				message:'复制成功'
			})
		},
		onError(erro){
			this.$message({
				type:'error',
				message:'复制失败'
			})
		},
		search(){
			//筛选状态
			this.page=1;
			this.getCompanyPublicizeList();
		},
		async getCompanyPublicizeList(){
			//获取列表
			const res=await this.$api.getCompanyPublicizeList({
				page:this.page,
				limit:16,
				status:this.taskState,
				keyword:this.searchCompanyName
			})
			if(res.data.level=='success'){
				this.tasks=res.data.data
				this.totalPage=res.data.page_info.total
			}
		},
		pageChange(e){
			//翻页
			this.page=e;
			this.getCompanyPublicizeList()
		},
		handleSelect(e){
			//选中检索的执行人
		},
		async rejectHandle(){
			//提交拒绝
			const res=await this.$api.setCompanyPublicizeStatus(
				{
					id:this.id,
					type:'refuse',
					refuse_reason:this.addForm.rejectReason
				}
				)
			if(res.data.level=='success'){
				this.getCompanyPublicizeList();
				this.$message({
					type: 'success',
					message: res.data.message
				});
				this.addFormVisible=false;
			}else{
				this.$message({
					type: 'error',
					message: res.data.message
				});
			}
        },
        async pass(id){
            //通过
            const judge= this.$confirm('通过该企业宣传吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const res=await this.$api.setCompanyPublicizeStatus(
						{
							id,
							type:'pass'
						}
						)
					if(res.data.level=='success'){
						this.getCompanyPublicizeList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
          
			});
		},
		async del(id){
            //删除
            const judge= this.$confirm('删除该条数据？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
				}).then(async() => {
					const res=await this.$api.delCompanyPublicize({id})
					if(res.data.level=='success'){
						this.getCompanyPublicizeList();
						this.$message({
							type: 'success',
							message: res.data.message
						});
					}else{
						this.$message({
							type: 'error',
							message: res.data.message
						});
					}
					
				}).catch(() => {
          
			});
        },
        getDetail(reason){
			//查看拒绝详情
			this.rejectReason=reason;
            this.detailVisible=true
        },
        async showPublicity(id){
			//查看宣传内容
			let res=await this.$api.getPublicizeContent({id})
			if(res.data.level=='success'){
				this.propagandaContent=res.data.data;
				this.publicityVisible=true;
			}else{
				this.$message({
					type:'error',
					message:res.data.message
				})
			}
            
        },
		async reject(id){
			//拒绝通过
			this.id=id;
            this.addFormVisible=true;
			
		},
        async companyInfoSearch(queryString,cb){
			//搜索企业
			if(queryString==''){
				return
			}
			const res=await  this.$api.companyInfoSearch({
					key_word:queryString
				})
			if(res.data.level=='success'){
				if(res.data.data.length==0){
                    cb([])
                    return
                }
				let data1=res.data.data.map((item)=>{
					return item.company_name
				})
				cb(data1)
			}
			
		},
		handleSelect(e){
			this.searchCompanyName=e
		},
		initData(){
			this.propagandaContent='';
			this.addForm.rejectReason='';
			this.id='';
			this.rejectReason=''
		}
	},
	mounted() {
		this.getCompanyPublicizeList()
	},
}
</script>
<style lang='scss' scoped>
  .task{
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
      }
      .task-form-text{
				color: #666666;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #f2f2f2;
			padding: 8px;
			margin: 10px 0px;
			box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
		.executorList{
			display: flex;
			flex-wrap: wrap;
			div{
				margin:10px;
				border:1px solid #eee;
				border-radius: 5px;
				padding:5px 10px;
			}
		}
  }
</style>

<style>
	.el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

	.task .el-dialog__body{overflow: auto;}
</style>
